<!--角色选择框-->
<template>
  <div class="records-detail-wrap" @click.stop>
    <div class="main" @click="currentId = ''">
      <a-timeline>
        <a-timeline-item v-for="record of records" :key="record.id" :color="currentId === record.id ? 'blue' : 'gray'">
          <div style="cursor: pointer" :id="record.id" class="record-item" :class="currentId === record.id ? 'blue' : ''">
            <div style="margin-left: -100px" @click.stop="currentId = record.id"> {{ getRecordText(record.type) }}</div>
            <div style="margin-top: -22px" @click.stop="currentId = record.id">{{ record.createTime }}</div>
            <div style="margin-top: 16px; padding: 16px" class="record-detail" @click.stop="currentId = record.id">
              <!-- <div class="title">{{ getRecordText(record.type) }}</div> -->
              <!-- <div v-for="item in recordConfig[record.type]" :key="item.key">
                  <span>{{ item.label }}</span>
                  <span>{{ record[item.key] }}</span>
                </div> -->
              <div v-for="item in record.info.split(',')" :key="item">{{ item }}</div>
              <!-- {{ record.info.split('，') }} -->
            </div>
          </div>
        </a-timeline-item>
      </a-timeline>
    </div>
    <div class="right">
      <a-timeline class="right-timeline" style="margin-left: 80px">
        <a-timeline-item v-for="record of records" :key="record.id" :color="currentId === record.id ? 'blue' : 'gray'">
          <div style="cursor: pointer" @click="scrollToSection(record.id)" class="record-item" :class="currentId === record.id ? 'blue' : ''">
            <div style="margin-left: -100px"> {{ getRecordText(record.type) }}</div>
            <div style="margin-top: -22px">{{ record.createTime }}</div>
          </div>
        </a-timeline-item>
      </a-timeline>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { transferRecords } from '@/views/asset/asset-info/AssetInfo.api';
  import { ref } from 'vue';
  import { render } from '/@/utils/common/renderUtils';
  const props = defineProps({
    assetId: {
      type: String,
      required: true,
    },
  });
  const emits = defineEmits(['back']);
  const records = ref<any[]>([]);
  for (let i = 1; i < 20; i++) {
    records.value.push({ id: i, type: '1', info: '2214', createTime: '2020-2020-22' });
  }
  transferRecords({ assetId: props.assetId }).then((res) => {
    console.log(res, 'transferRecords');
    records.value = res;
  });
  const currentId = ref('');
  function scrollToSection(id) {
    // 使用你的滚动逻辑来定位到指定位置
    // 例如，使用 Vue 的 $refs 或者原生 JavaScript 来滚动到目标元素
    currentId.value = id;
    const section = document.getElementById(id);
    if (section) {
      section.scrollIntoView({ behavior: 'smooth' });
    }
  }
  const getRecordText = (type) => {
    return render.renderDictText(type, 'approvalType');
  };
</script>
<style scoped lang="less">
  .records-detail-wrap {
    height: 100%;
    overflow: hidden;
    background-color: #fff;
    width: 100%;
    display: flex;
    &:hover {
      overflow: overlay;
    }
    .main {
      flex: 1;
      // margin-left: 200px;
      padding-left: 150px;
      padding-top: 10px;
      border-top: 20px solid #fff;
      height: 100%;
      overflow-y: hidden;
      &:hover {
        overflow: overlay;
      }
    }
    .record-detail {
      width: 500px;
      border-radius: 3px;
      border: 1px solid transparent;
      transition: all 0.3s;
      box-shadow:
        0 0px 1px 0px #00000029,
        0 0px 1px #0000001f,
        0 2px 5px 2px #00000017;
    }
    .right {
      height: 400px;
      width: 350px;
      padding-left: 20px;
      margin-top: 20px;
      border-right: 20px solid #fff;
      overflow-y: hidden;
      &:hover {
        overflow: overlay;
      }
      .right-timeline {
        padding-top: 10px;
      }
    }
  }

  .record-item {
    transition: all 0.3s;
    &.blue {
      color: #1890ff;
      .record-detail {
        border-color: #1890ff;
      }
    }
  }
</style>
